<template>
<div>
  <!--  模态框-->
  <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose">
    <!-- 内容 -->
    <div>
      <el-col :span="15">  <el-input v-model="searchData" placeholder="案号搜索"></el-input></el-col>
      <el-select v-model="select" filterable placeholder="请选择">
        <el-option label="委托人搜索" value="1"></el-option>
        <el-option label="对方当事人搜索" value="2"></el-option>
        <el-option label="案号搜索" value="3"></el-option>
        <el-option label="案由搜索" value="4"></el-option>
        <el-option label="归档号搜索" value="5"></el-option>
        <el-option label="受理机关搜索" value="6"></el-option>
        <el-option label="受理法院搜索" value="7"></el-option>
      </el-select>
      <el-button type="primary" plain @click="gaojijiansuo">检索</el-button>
    </div>
    <div>
      <el-table
          :data="anjianANDnoshow"
          style="width: 100%"
      >
        <el-table-column
            prop="caseNo"
            label="选择"
            width="180">
          <template  slot-scope="scope"  >
            <el-button type="success" icon="el-icon-check" circle @click="to(scope.$index, scope.row)" ></el-button>
          </template>
        </el-table-column>
        <el-table-column
            prop="caseNo"
            label="案号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="caseWtr"
            label="委托人">
        </el-table-column>
        <el-table-column
            prop="caseOppositeParties"
            label="对方当事人">
        </el-table-column>
        <el-table-column
            prop="caseAttorney"
            label="承办律师">

        </el-table-column>
        <el-table-column
            prop="collectionTime"
            label="收案日期">
        </el-table-column>

        <!--结束-->


        <!--结束-->
      </el-table>
      <!--分页-->
      <!-- 分页组件 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[1,5, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

      <!--分页结束-->
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>

      </span>
  </el-dialog>

  <!--  模态框结束-->
  <el-row>
    <el-col :span="2.5">
      <b>|案件收支</b>
    </el-col>
  </el-row>


  <el-form :inline="true"   :ref="extend" :model="extend"  :rules="rules"  class="demo-form-inline">
<el-row>
    <el-col :span="12">
          <el-form-item label="案件:" prop="anjian">
            <el-input
                placeholder="选择案件"
                v-model="extend.anjian" >
              <i slot="prefix" class="el-input__icon el-icon-search"  @click="dialogVisible = true"></i>
            </el-input>

  <!--      隐藏的案件id-->
        <el-input v-show="false" v-model="extend.caseLawId"></el-input>
      </el-form-item>
    </el-col>



       <el-col :span="12">
         <b>已收款</b>
         <br>
         {{extend.casePaidsal}}元
       </el-col>
</el-row>
<el-row>

  <el-col :span="11">

    <el-form-item label="收款金额:" prop="cwInoutMoney">
      <el-input v-model.number="extend.cwInoutMoney" ></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="收款日期:" prop="cwInoutDate" >
    <el-date-picker
        v-model="extend.cwInoutDate"
        type="date"
        readonly
        value-format="yyyy-MM-dd"
        placeholder="选择日期">
    </el-date-picker>
    </el-form-item>
  </el-col>
</el-row>
<el-row>
  <el-col>
    <el-button type="primary" plain @click="onsubmit(extend)">下一步</el-button>
  </el-col>
</el-row>



      </el-form>
</div>
</template>

<script>
export default {
  name: "CwInoutLURU",
  data() {
    return {    //案件 以及不显示的数据
      anjianANDnoshow: [],
      searchData: "",//名称 进行高级查询
      select: "",//可选的搜索
      //登录者的id
      empid: JSON.parse(localStorage["user"])[0].hrEmpId,
      total: 0,
      pageNum: 1, //初始页
      pageSize: 1,
      dialogVisible: false,   //模态框
  //传入后端
      extend: {
        anjian: "",   //显示不作处理  案件名称
        caseLawId: "",//案件id
        casePaidsal:"",//已收款
        cwInoutMoney:"",//收款金额
        cwInoutDate:"",//收款日期
        caseAgencyfee:"",//代理费
        caseInvoiced:"", //发票金额
      },
      //表单验证
      rules:{
        anjian:[  //案件
          {required: true, message: '案件不能为空', trigger: 'change'}
        ],
        cwInoutMoney:[
          { required: true, message: '金额不能为空', trigger: 'blur' },
          { type: 'number', message: '金额必须为数字值', trigger: 'blur' }
        ],
        cwInoutDate:[
          {required: true, message: '日期不能为空', trigger: 'blur'}
        ]
      }
    }

  },
  methods: {
    onsubmit(extend){

      this.$refs[extend].validate((valid) => {
        if (valid) {
          //校验通过后的操作
          this.$router.push({name:'cwinoutlurutianjia',query:this.extend})
        } else {
          alert("验证错误")
        }
      })


    },
    // 案件模态框的高级查询
    gaojijiansuo() {
      this.empidGEREN();
    },
    //通过当前登陆者的员工id渲染  只显示  不用传递的数据
    empidGEREN() {
      this.$http.get('/caseLaw', {
        params: {
          "hrEmpId": this.empid, "searchData": this.searchData
          , "select": this.select, pageNum: this.pageNum, //初始页
          pageSize: this.pageSize   //    每页的数据
        }
      }).then(res => {
      this.anjianANDnoshow = res.data.data.list;
       this.total=res.data.data.total
      this.extend.cwInoutDate= this.$date.formatDate(new Date(),"yyyy-MM-DD") // hh:mm:ss
        console.log(res.data.data)
      })
    },
    //案件模态框 点击右上角的x按钮触发
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(res => {
            done();
            console.log(res)
          })
          .catch(res => {
            console.log(res);
          });
    },
    //分页
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pageSize = size;
      console.log(this.pageSize)  //每页下拉显示数据
      this.empidGEREN()
    },
    handleCurrentChange: function (pageNum) {
      this.pageNum = pageNum;
      console.log(this.pageNum)  //点击第几页
      this.empidGEREN()
    },
    //点击勾选案件后触发
    to(index, row) {
      //id交给 要传送的对象的案件id
      this.extend.caseLawId = row.id
      //显示但不传送的值   案件名称
      this.extend.anjian = row.caseNo
      //代理费
this.extend.caseAgencyfee =row.caseAgencyfee
       //发票金额
      this.extend.caseInvoiced=row.caseInvoiced

      //关闭模态框
      this.dialogVisible = false
  //渲染已收款
      this.extend.casePaidsal=row.casePaidsal



    }
  },
  created() {
    //调用empidGEREN  执行这个方法 获取显示 不传递的数据
    this.empidGEREN();
  }
}

</script>

<style scoped>
.el-input{
  width: 400px;

}

</style>